<template>
  <!--
    封装表格组件：项目中使用表格太多了，封装能减少代码重复，
    data: 原element-ui, table数据传入信息.
    tableOptions: 表格配置信息.
    数据格式: {
      isEdit: true // 可以控制表格是否被编辑
  
      type, // 1.原生el-table中可选择selection/index/radio/selected 2. 修改模式下可自定义数据的修改类型, 默认为number, 可选input, date, dateTime等
  
      prop, // 表格接受信息
  
      label, // 表格头信息

      pageData, // 分页数据 type: Obejct, 需要包含pageNum, pageSize, total三个字段
  
      slot, // 是否启用插槽, 如果启用的话需要使用模板填充插槽, 插槽名为slot名.
  
      callBack -> slot的值不为空时 , 可以用来做值的判断
  
      render -> 返回值为一个函数, 函数内部返回一个组件, 用来渲染表格内容
  
      height, // 整个表格高度
  
      loading: loading状态 true 或者 false.
  
      selectionChange: @selectionChange; 表格被选中后回调事件.
  
      tableData -> 表格数据
  
      loading -> 表格loading状态
  
      height -> 表格高度
  
      tableKey -> 表格key值,
  
      validate -> 表格校验, 仅在编辑模式下生效, 参数可选为[Boolean, Function, Array], 如果为Boolean 则默认校验所有的表格项是否为非空, 如果为function, 则根据函数返回值来判断是否校验该项, Array支持多组校验规则函数, 如果校验通过, 则resolve, 否则reject, 并且返回错误信息.此方法仅支持外部调用
  
      disabled -> 表格是否禁用, 仅在编辑模式下生效, 参数可选为[Boolean, Function], 如果为Boolean, 则禁用所有的表格项, 如果为function, 则根据函数返回值来判断是否禁用该项.
  
   -->
  <div>
    <el-table
      :data="tableData"
      v-loading="loading"
      :max-height="height"
      ref="elTable"
      @selection-change="selectionChange"
      v-bind="$attrs"
      v-on="$listeners"
      :key="tableKey"
    >
      <template v-for="(col, index) in tableOptions">
        <el-table-column v-if="col.type === 'index'" type="index" width="50" label="序号" />

        <!-- 自定义插槽 -->
        <el-table-column v-else-if="col.type === 'slot'" :width="col.width || null" :label="col.label">
          <template slot-scope="{ row }">
            <slot :row="row" :name="col.name"></slot>
          </template>
        </el-table-column>

        <!-- 操作 -->
        <el-table-column
          v-else-if="col.slot === 'options'"
          :width="col.width || null"
          :label="col.label"
          :fixed="col.fixed || null"
        >
          <template slot-scope="{ row }">
            <slot :row="row" name="options"></slot>
          </template>
        </el-table-column>

        <el-table-column
          v-else
          :key="index"
          :width="col.width || null"
          :label="col.label"
          :fixed="col.fixed || null"
          v-bind="col"
          :min-width="col.width || null"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="{ row }">
            <template v-if="col.render">
              <oa-render :renderFn="() => col.render(row)" />
            </template>

            <span v-else>{{ row[col.prop] || '--' }}</span>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <div class="page-fixed" v-if="isShowPagination">
      <el-pagination
        :current-page="where.page"
        :page-size="where.limit"
        :page-sizes="[15, 20, 30]"
        :total="total"
        layout="total,sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import oaRender from './oa-render.vue'
export default {
  name: 'oaTable',
  props: {
    tableData: {
      type: Array,
      default: () => []
    },

    tableOptions: {
      type: Array,
      default: () => []
    },

    loading: {
      type: Boolean,
      default: () => true
    },
    total: {
      type: Number,
      default: () => 0
    },

    height: {
      type: [String, Number],
      default: () => null
    },

    fixed: {
      type: [String],
      default: () => null
    },

    showSearch: {
      type: Boolean,
      default: () => false
    },

    pageData: {
      type: Object,
      default: () => null
    },

    isShowPagination: {
      type: Boolean,
      default: () => true
    },

    pagination: {
      type: [Object, Boolean],
      default: () => false
    }
  },
  components: { oaRender },

  data() {
    return {
      tableKey: false,
      where: {
        page: 1,
        limit: 15
      }
    }
  },

  methods: {
    selectionChange(selection) {
      this.$emit('selectionChange', selection)
    },
    handleSizeChange(val) {
      this.$emit('handleSizeChange', val)
    },
    handleCurrentChange(val) {
      this.$emit('handleCurrentChange', val)
    }
  }
}
</script>
